<script setup lang="ts">
import BarCharts from './components/BarCharts.vue'
import TableList from './components/TableList.vue'
import { STORAGE_MODES } from '@/enum/modules/indicator'
import { useTimeTypeFormat } from '@/mixins/MixinTimeTypeFormat'
import { useLoadData } from './composable'
import { useTemplateView } from '@/mixins/MixinTemplateView'

const { getCode } = useTemplateView()
const modelId = ref<number>()
const nodeId = ref<number>()
const {
  timeType,
  dataTime,
  pickerType,
  pickerFormat,
} = useTimeTypeFormat()
const {
  modelTreeItem,
  lastNodes,
  lastNodeDataItem,
  getModelTree,
  loadAllLastModelTag,
  loadAllLastModelData,
} = useLoadData()

const data = computed(() => {
  const d = unref(lastNodeDataItem)
  return [
    ['名称', ...(d?.tagDataVoList?.map(item => `${item.name}（ID：${item.id}）`) ?? [])],
    ...(d?.rowData || []).map((v) => {
      return [
        v,
        ...(d?.tagDataVoList?.map(item => item.nowData?.[v]) ?? []),
      ]
    }),
  ]
})

const tableData = computed(() => {
  const d = unref(lastNodeDataItem)
  return [
    ['名称', ...(d?.rowData ?? [])],
    ...(d?.tagDataVoList || []).map((v) => {
      return [
        `${v.name}（ID：${v.id}）`,
        ...(d?.rowData?.map(item => v.nowData?.[item]) ?? []),
      ]
    }),
  ]
})

async function clickSearch() {
  const id = nodeId.value ?? modelId.value
  await loadAllLastModelData({
    modelId: id,
    modelCode: getCode(),
    timeType: timeType.value,
    dataTime: dataTime.value,
  })
}

async function init() {
  // 查模型树
  await getModelTree(getCode() as string)
  // 获取第一个modelId
  // modelId.value = modelTreeItem.value?.id

  await loadAllLastModelTag(modelId.value, getCode())
  await loadAllLastModelData({
    modelId: modelId.value,
    modelCode: getCode(),
    timeType: timeType.value,
    dataTime: dataTime.value,
  })
}

watch(modelId, () => {
  loadAllLastModelTag(modelId.value, getCode())
  nodeId.value = undefined
})

onMounted(() => {
  init()
})
</script>

<template>
  <div class="h-full w-full flex flex-col p-4">
    <div v-if="modelTreeItem" class="fs-14 flex flex-nowrap items-center gap-3">
      <span>核算单元</span>
      <ElCascader v-model="modelId" class="w-60" clearable :options="([modelTreeItem] as any)" :props="{ checkStrictly: true, emitPath: false, label: 'name', value: 'id', children: 'children' }" />
      <span>节点</span>
      <ElSelect v-model="nodeId" class="!w-60" clearable filterable>
        <ElOption v-for="item in lastNodes" :key="item.id" :label="item.name" :value="item.id" />
      </ElSelect>
      <span>统计类型</span>
      <ElSelect v-model="timeType" class="ml-3 !w-24">
        <ElOption label="日" :value="STORAGE_MODES.DAY" />
        <ElOption label="月" :value="STORAGE_MODES.MONTH" />
        <ElOption label="年" :value="STORAGE_MODES.YEAR" />
      </ElSelect>
      <ElDatePicker v-model="dataTime" class="-ml-3" :type="pickerType" :value-format="pickerFormat" :format="pickerFormat" />
      <SearchButton @click="clickSearch" />
    </div>
    <div class="alpha-block mt-4 h-100 w-full flex-shrink-0">
      <BarCharts :data="data" />
    </div>
    <div class="mt-4 flex-auto overflow-auto">
      <TableList :loading="false" :data="tableData" />
    </div>
  </div>
</template>
